<template>
  <div class="container">
    <ul class="orderlist" v-if="orderlists.length != 0">
      <li v-for="(item, index) in orderlists" :key="index" @tap="goto_orderinfo(item.orderid)">
        <div class="header flex">
          <div class="flex-item flex">
            <span class="user_pic">
              <img v-if="item.headurl == 0 || !item.headurl" src="/static/imgs/system_user.png">
              <img v-if="item.headurl == 0">
              <img v-else :src="item.headurl">
            </span>
            <span class="user_name flex-item">{{ item.username }}</span>
          </div>
          <div>
            <span class="status" v-if="item.status == 0">未结账</span>
            <span class="status" v-if="item.status == 1">已结账</span>
            <span class="status" v-if="item.status == 2">已结账</span>
          </div>
        </div>
        <div class="order_time listwords">订单时间：{{ item.addtime }}</div>
        <div class="shop listwords">消费门店：{{ item.shopname }}</div>
        <div class="details">
          <span class="money">现金消费：￥{{ item.recemoney }}</span>
          <span class="money">卡内消费：￥{{ item.cardreduce+item.usebalance+item.usegiftbalance }}</span>
        </div>
      </li>
      <div v-if="isbottom" class="flex bottom">
        <span>已经到底啦</span>
      </div>
    </ul>
    <ul v-else>
      <Empty message="没有订单信息"></Empty>
    </ul>
  </div>
</template>

<script>
import moment from 'moment'
import api from '@/utils/api'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      orderlists: [],
      guest_id: '',
      page: 0,
      size: 10,
      isbottom: false
    }
  },
  components: {
    Empty
  },
  async onLoad () {
    let that = this
    // 接收客户id
    that.guest_id = that.$route.query.id
    // 重置参数
    that.orderlists = []
    that.page = 0
    that.isbottom = false
    // 请求数据
    await Promise.all([
      that.getorderlists()
    ])
  },
  methods: {
    async getorderlists () {
      let that = this
      let paramObj = {
        guest_id: that.guest_id,
        page: that.page,
        size: that.size
      }
      const res = await api.getorderguestlist(paramObj);
      if (res.code === '100') {
        const data = res.data
        data.forEach((e, i) => {
          data[i]['addtime'] = moment.unix(e.addtime).format('YYYY-MM-DD HH:mm a')
        })
        that.orderlists.push.apply(that.orderlists, data)
        if (data.length < 10 && that.orderlists.length >= 3) {
          that.isbottom = true
        }
      } else {
        that.isbottom = true
      }
    },
    goto_orderinfo (orderid) {
      this.$router.push({ path: '/pages/guest/orderlistdetails/orderlistdetails', query: { id: orderid } })
    }
  },
  onReachBottom () {
    let that = this
    if (!that.isbottom) {
      that.page += 1
      that.getorderlists()
    }
  }
}
</script>

<style scoped>
.container {
  padding: 0 30rpx;
}
.orderlist {
  width: 100%;
  margin-top: 18rpx;
}
.orderlist li {
  width: 100%;
  background: #fff;
  padding: 33rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.orderlist li .header {
  margin-bottom: 16rpx;
}
.orderlist li .user_pic {
  margin-right: 28rpx;
}
.orderlist li .user_pic,
.orderlist li .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.orderlist li .user_name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
}
.orderlist li .status {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32px;
  color: rgba(102, 102, 102, 1);
  margin-right: 10rpx;
}
.shop {
  padding-bottom: 18rpx;
  margin-bottom: 0;
}
.orderlist li .listwords {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(153, 153, 153, 1);
  margin-bottom: 18rpx;
}
.orderlist li .details {
  display: flex;
  flex-direction: column;
  margin-top: 26rpx;
}
.orderlist li .details span {
  height: 52rpx;
}
.orderlist li .details .money {
  display: inline-block;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(102, 102, 102, 1);
}
.orderlist li .details .details_btn {
  width: 112rpx;
  height: 46rpx;
  border: 2rpx solid #ff4444;
  border-radius: 24rpx;
  text-align: center;
  line-height: 42rpx;
  color: rgba(255, 68, 68, 1);
  font-size: 24rpx;
  margin-right: 32rpx;
}
.orderlist li .details .details_btn:last-child {
  margin-right: 0;
}
</style>

